<template>
  <nav class="navbar" :class="{ 'sticky': isSticky, 'navbar-hidden': isHidden }">
    <div class="container">
      <div class="nav-left">
        <div class="logo">
          <router-link to="/">
            <img src="/images/logo.png" alt="教育平台" class="logo-img" />
          </router-link>
        </div>
      </div>
      
      <div class="nav-center" :class="{ 'active': isMobileMenuOpen }">
        <div class="main-links">
          <router-link 
            v-for="(item, index) in navItems" 
            :key="index" 
            :to="item.path" 
            class="nav-item"
            :class="{ 'active': $route.path === item.path }"
            @click="closeMobileMenu"
          >
            {{ item.title }}
          </router-link>
        </div>
      </div>
      
      <div class="auth-links" v-if="!userInfo">
        <router-link to="/login" class="auth-btn login" @click="closeMobileMenu">登录</router-link>
        <router-link to="/register" class="auth-btn register" @click="closeMobileMenu">注册</router-link>
      </div>
      <div class="auth-links" v-else>
        <UserInfo />
      </div>
      
      <div class="mobile-menu-btn" @click="toggleMobileMenu">
        <i class="fas" :class="isMobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useUserStore } from "@/store/modules/user";
import UserInfo from "@/components/userInfo.vue";
import { localUtils } from '@/utils/local';
import type { UserInfo as UserInfoType } from '@/api/user';
const userStore = useUserStore();
const userInfo = computed(() => {
  const info = userStore.userInfo || localUtils.get<UserInfoType>("userInfo")
  return !!info?.userId;
});
console.log(userInfo.value, "userInfo");

// 导航栏数据
const navItems = ref([
  { path: '/', title: '首页' },
  { path: '/courses', title: '课程' },
  { path: '/consultation', title: '咨询师' },
  { path: '/about', title: '关于' }
]);

// 移动端菜单状态
const isMobileMenuOpen = ref(false);

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};

// 关闭移动端菜单
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false;
};

// 滚动效果状态
const isSticky = ref(false);
const isHidden = ref(false);
let lastScrollTop = 0;
let scrollTimer: number | null = null;

// 处理滚动事件
const handleScroll = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  
  // 判断是否应该固定在顶部
  if (scrollTop > 80) {
    isSticky.value = true;
  } else {
    isSticky.value = false;
  }
  
  // 判断滚动方向，向下滚动超过300px时隐藏导航栏
  if (scrollTop > 300) {
    // 向下滚动
    if (scrollTop > lastScrollTop) {
      isHidden.value = true;
    } 
    // 向上滚动
    else {
      isHidden.value = false;
    }
  } else {
    isHidden.value = false;
  }
  
  lastScrollTop = scrollTop;
  
  // 当滚动停止后，自动显示导航栏
  if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
  }
  
  scrollTimer = window.setTimeout(() => {
    isHidden.value = false;
  }, 1000);
};

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
  if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
  }
});
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease;
}

.navbar.sticky {
  position: fixed;
  top: 0;
}

.navbar-hidden {
  transform: translateY(-100%);
}

.container {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}

.nav-left {
  flex: 0 0 200px;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.logo {
  height: 40px;
}

.logo-img {
  height: 100%;
  object-fit: contain;
}

.main-links {
  display: flex;
  gap: 30px;
  white-space: nowrap;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
  position: relative;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-item:hover::after {
  width: 100%;
}

.nav-item.active {
  color: #007bff;
  font-weight: 500;
}

.nav-item.active::after {
  width: 100%;
}

.nav-item:hover {
  color: #007bff;
}

.auth-links {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}

.auth-btn {
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s;
  white-space: nowrap;
}

.login {
  color: #007bff;
  border: 1px solid #007bff;
}

.login:hover {
  background: rgba(0, 123, 255, 0.1);
}

.register {
  background: #007bff;
  color: #fff;
}

.register:hover {
  background: #0056b3;
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

@media (max-width: 768px) {
  .nav-left {
    flex: 0 0 auto;
  }
  
  .nav-center {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .nav-center.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .main-links {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .nav-item {
    width: 100%;
    text-align: center;
    padding: 12px;
  }

  .nav-item::after {
    bottom: 8px;
  }

  .auth-links {
  display: none;
    flex-direction: column;
    width: 100%;
  }

  .auth-btn {
    width: 100%;
    text-align: center;
  }

  .mobile-menu-btn {
    display: block;
  }
  .logo{
    display: none;
  }
}
</style> 